<template>
  <div :class="'van-after-border '+ item.class">
    <van-cell clickable title-class="formCellTitle" value-class="formCellValue" :readonly="item.readonly?true:false" :name="item.key" :value="choosePerson.length> 0 ? '' : '点击选择人员'" :placeholder="item.placeholder?item.placeholder:'点击选择人员'" @click="listPerson">
      <template #title>
        <span class="custom-title">{{ label }}
          <van-icon v-if="help" name="question" @click="showHelp" />
        </span>
      </template>
      <van-tag v-for="person of choosePerson" :key="person.key" round color="#87ccf2">
        {{ person.sname }}
      </van-tag>
      <template #right-icon>
        <div class="iconfont rightIcon">
          &#xe613;
        </div>
      </template>
    </van-cell>
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '100%' }">
      <search-header @cancel="cancel" @submitSearch="doSearch" />
      <person-list :choose-person="choosePerson" :list="list" :limit="limit" :loading="loading" :finished="finished" :btn-text="btnText" @load="pageLoad" @submitSelected="submitSelected" />
    </van-popup>
  </div>
</template>

<script>
import EleBase from './EleBase'
import SearchHeader from '../../common/SearchHeader'
import PersonList from '../../common/PersonList'
import { homeApi } from '@/api/home.js'

export default {
  name: 'EleChoosePerson',
  components: { PersonList, SearchHeader },
  extends: EleBase,
  props: {
    item: {
      type: Object, // 类型
      default: null // 默认值
    }
  },
  data () {
    return {
      limit: 0,
      loading: false,
      finished: false,
      pageNO: 1,
      pageSize: 20,
      query: '',
      btnText: '确定',
      refProp: this.$props.item,
      showPicker: false,
      choosePerson: [],
      list: []
    }
  },
  mounted () {
    // this.list = this.loadPersonList();
  },
  methods: {
    listPerson () {
      if (this.disabled || this.readonly) {
        this.showReadonlyTip()
        return
      }
      this.showPicker = true
      this.finished = false
      this.pageNO = 0
      this.pageSize = 20
      this.loading = true
      this.query = ''
      this.list.length = 0
      this.loadPersonList()
    },
    cancel () {
      this.showPicker = false
    },
    doSearch (text) {
      this.finished = false
      this.pageNO = 0
      this.pageSize = 20
      this.loading = true
      this.query = text
      this.list.length = 0
      this.loadPersonList()
    },
    pageLoad () {
      this.pageNO++
      this.loadPersonList()
    },
    loadPersonList () {
      var $this = this

      var options = this.$props.item.options
      var data = {
        roleId: (options && options.roleId) ? options.roleId.roleId : -1,
        pageNum: this.pageNO,
        pageSize: this.pageSize,
        query: this.query
      }
      homeApi.persons(data).then(res => {
        console.log('save,', res)
        if (res.retCode === '000000') {
          res.data.data.forEach((val, key) => {
            var obj = {}
            obj.loginname = val.LOGINNAME
            obj.sname = val.USERNAME
            obj.department = val.DEPARTMENTNAME
            obj.sid = val.USERID
            if ($this.isChecked(obj)) {
              obj.checked = true
            }
            $this.list.push(obj)
          })
          $this.loading = false
          if (!res.data.data || res.data.data.length < this.pageSize) {
            this.finished = true
          }
        }
      }).catch(err => {
        console.error(err)
        $this.loading = false
        $this.finished = true
        console.log(err)
      })

      // var url = this.URLS.API_BASE_URL + '/sys/persons'
      // request({ url: url, method: 'post', params: params }).then(res => {
      // })
    },
    isChecked (obj) {
      for (var val of this.choosePerson) {
        if (val.sid === obj.sid) {
          return true
        }
      }
      return false
    },
    submitSelected (selectedPerson) {
      this.showPicker = false
      this.choosePerson = selectedPerson
      this.$props.item.value = this.choosePerson
    }
  }
}
</script>

<style scoped>
.searchHeader {
  height: 51px;
  position: initial;
  border-bottom: 1px solid #ebedf0;
}

.personList {
  height: calc(100% - 51px);
}

.van-tag:not(:last-child) {
  margin-right: 4px;
}
</style>
